<template>
  <div style="display: flex;flex-direction: column;align-items: center;padding: 20px 30px;">
    <div style="width: 100%;">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="企业信息" name="first">
          <span slot="label"><i class="el-icon-date"></i> 企业信息</span>
          <div style="padding-right: 30px;">
            <el-form :model="formData" ref="formData" name="basic" label-width="120px"
              autocomplete="off">

              <el-form-item label="企业名称:" name="companyName">
                <span>{{ formData.companyName }}</span>
              </el-form-item>

              <el-row :gutter="15">
                <el-col :span="9">
                  <el-form-item label="企业简称:" name="companyShort">
                    <span>{{ formData.companyShort }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="营业执照代码:" name="credCode">
                    <span>{{ formData.credCode }}</span>
                  </el-form-item>
                </el-col>

              </el-row>
              <!-- <el-row>
                <el-col :span="9">
                  <el-form-item label=":" name="zoneNo">
                    <el-input v-model="formData.zoneNo" />
                  </el-form-item>
                </el-col>
              </el-row> -->
              <el-row :gutter="15">
                <!-- <el-col :span="9">
                  <el-form-item label="营业执照代码:" name="credCode">
                    <el-input v-model="formData.credCode" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="9">
                  <el-form-item label="主要负责人:" name="adminName">
                    <el-input v-model="formData.headName" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="主要负责人电话:" name="adminName">
                    <el-input v-model="formData.headPhone" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="安全管理员:" name="adminName">
                    <el-input v-model="formData.adminName" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="安全管理员电话:" name="adminName">
                    <el-input v-model="formData.adminPhone" />
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="9">
                  <el-form-item label="地块:" name="zoneNo">
                    <el-input v-model="formData.zoneNo" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="楼栋:" name="buildNo">
                    <el-input v-model="formData.buildNo" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="楼层:" name="floor">
                    <el-input v-model="formData.floor" />
                  </el-form-item>
                </el-col> -->

              </el-row>

              <el-form-item label="营业执照:" name="credCode">
                <el-upload class="upload-demo" drag
                  action="https://jsonplaceholder.typicode.com/posts/" :http-request="handleUpload1"
                  :show-file-list="false">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </el-form-item>
              <el-row :gutter="15" v-if="formData.fileUrl">
                <el-col :span="9">
                  <el-form-item label="营业执照下载:" name="fileUrl">
                    <div @click="clickDownload" style="cursor: pointer;">
                      <span style="margin-right: 10px;">{{ formData.fileName }}</span>
                      <i class="el-icon-download"></i>
                    </div>

                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>

          </div>

        </el-tab-pane>
        <el-tab-pane label="账号信息" name="second">
          <el-form :model="formData" name="basic" label-width="120px" autocomplete="off">
            <el-form-item label="企业名称:" name="companyName">
              <span>{{ formData.companyName }}</span>
            </el-form-item>

            <el-row :gutter="15">

              <el-col :span="9">
                <el-form-item label="企业账号">
                  <el-input v-model="formData.userName" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="9">
                <el-form-item label="账号密码">
                  <div style="display: flex;">
                    <el-input v-model="formData.password" show-password style="flex: 1;"
                      :disabled="user.roleName !='company' && user.userId != formData.companyName" />
                    <el-button type="primary" icon="el-icon-top-left"
                      v-if="user.roleName !='company'">重置密码</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px;">
        <el-button @click="handleCancel">返回</el-button>
        <el-button type="primary" @click="handleOk">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryCompanyInfo,
  updateCompany,
  uploadFile,
  resetPassword,
} from '@/service/company';
import { updateUserNameAndPassword } from '@/service/user';

import { getCurrUser } from '@/common/constants';
import { downloadFile } from '@/common/download';

export default {
  components: {},
  props: {},
  data() {
    return {
      user: {},
      activeName: 'first',
      formRef: null,
      formData: {},
      visible: false,
      companyName: '',
      isCurrent: false,
      isSaving: false,
    };
  },
  mounted() {
    this.user = getCurrUser();
    this.companyName = this.user.userId;
    this.isCurrent = this.user.userId == this.companyName;
    this.loadCompanyInfo();
  },
  methods: {
    async loadCompanyInfo() {
      const res = await queryCompanyInfo({ companyName: this.companyName });
      if (res.data) {
        this.formData = res.data;
        // Object.assign(, );
      }
    },

    handleCancel() {
      this.$router.back();
    },
    clickDownload() {
      console.log('this.formData.fileUrl', this.formData.fileUrl);
      downloadFile(this.formData.fileUrl);
    },

    getFD(fileObj) {
      const formData = new FormData();
      formData.append('file', fileObj.file);
      return formData;
    },

    async handleUpload1(params) {
      const fd = this.getFD(params);
      fd.append('companyName', this.companyName);
      let res = await uploadFile(fd);
      if (res.success) {
        this.clickQuery();
      }
      return false;
    },

    handleOk() {
      // if (1 == 1) {
      //   console.log('activeName', this.activeName);
      //   return;
      // }
      this.isSaving = true;

      if ('second' == this.activeName) {
        this.saveUserInfo();
      } else {
        this.saveData();
      }
      this.isSaving = false;
    },
    async saveUserInfo() {
      let res = null;
      const req = Object.assign(
        { userId: this.formData.companyName },
        this.formData
      );
      // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
      res = await updateUserNameAndPassword(req);
      if (res.success) {
        this.loadCompanyInfo();
        this.$message.success('保存成功！');
      } else {
        this.$message.error(res.rtn_message);
      }
    },

    async saveData() {
      let res = null;
      const req = Object.assign({}, this.formData);
      // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
      res = await updateCompany(req);
      if (res.success) {
        this.loadCompanyInfo();
        this.$message.success('保存成功！');
      } else {
        this.$message.error(res.rtn_message);
      }
    },
  },
};
</script>
<style scoped>
>>> .el-form-item__content {
  text-align: start;
}
</style>